<template>
  <view class="screen">
    <view class="content">
      <view class="item" @click="onClickNav(index)" :class="{ itemActive: index === activeIndex }" v-for="(item, index) in list" :key="index">
        <text class="itemText">{{ item }}</text>
      </view>
    </view>
    <view class="gameScreen">
      <text class="gameScreenText" @click="toggleShowGameList">游戏筛选</text>
      <view class="gameList" v-show="isShowGameList">
        <view class="gameItem" :class="{activeGame:currentGameId===item.id}" @click="onClickGame(item)" v-for="(item, index) in games" :key="index">
          <image v-if="item.icon" class="gameItemImage" :src="item.icon"></image>
          <text class="gameItemText">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "screen",
  data() {
    return {
      activeIndex: this.current,
      isShowGameList: false,
      currentGameId: null
    };
  },
  computed:{
    games(){
      let games = JSON.parse(JSON.stringify(this.$store.state.video.games));
      games.unshift({name:"全部游戏", id:0, icon:""});
      return games;
    }
  },
  props: {
    list: {
      type: Array,
      default: function() {
        return [];
      }
    },
    current: {
      type: Number,
      default: 0
    }
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler(n) {
        this.$emit("event-nav-change", n);
      }
    }
  },
  mounted() {
    // 获取游戏列表
    this.$store.dispatch("video/getGames");
  },
  methods: {
    onClickNav(index) {
      this.activeIndex = index;
      this.$emit("update:current", index);
    },
    toggleShowGameList() {
      this.isShowGameList = !this.isShowGameList;
    },
    onClickGame(info) {
      this.currentGameId = info.id;
      this.$emit("event-game-change", info);
      this.isShowGameList = false;
    }
  }
};
</script>

<style lang="scss" scoped>
$height: 60rpx;
.screen {
  background-color: #ffffff;
  height: $height;
  padding: 10rpx 0;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.content {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.item {
  margin: 0 20rpx;
  padding: 0 5rpx;
  color: #9aa2af;
}
.itemText {
  color: inherit;
}
.itemActive {
  border-bottom: 4rpx solid #6db7ed;
  color: #000000;
}
.gameScreen {
  text-align: center;
  width: 160rpx;
  height: $height;
  position: relative;
}
.gameScreenText {
  width: 160rpx;
  height: $height;
  color: #6db7ed;
  line-height: $height;
}
.gameList {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}
.gameItem {
  background-color: rgba($color: #000000, $alpha: 0.7);
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  padding: 10upx;
  margin-bottom: 2rpx;
}
.activeGame{
  background-color: #fb7299;
}
.gameItemImage {
  background-color: #eeeeee;
  width: 40rpx;
  height: 40rpx;
  border-radius: 40rpx;
  overflow: hidden;
}
.gameItemText {
  color: #ffffff;
  font-size: 24rpx;
}
</style>
